<template>
	<el-main class="main">
		<StudentInfoForm
				style="width: 50%;"
				v-model:studentInfo="studentInfo"
				label-width="140"
				ref="sutdentInfoFormRef"
			>
				<template #header>
					<el-affix :offset="149" @scroll="scroll($event, handleFixTop)" :class="{fixTop}">
            <el-button @click="updateStudentInfo" type="primary">更新个人信息</el-button>
          </el-affix>
				</template>
      </StudentInfoForm>
	</el-main>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import StudentInfoForm from "@/views/student/components/student-Info-form/index.vue";

import useTabs from '@/utils/useTabs';

const route = useRoute()
const { proxy } = getCurrentInstance();

const sutdentInfoFormRef = ref(null);
const studentInfo = ref({});


const getStudentDetail = () => {
  const studentId = route.params.id;
  if (studentId) {
    proxy.$API.student.viewStudentDetail.get({
      studentId,
    }).then(res => {
      if (res.code === 200) {
        studentInfo.value = {
          ...res.data,
        };
		if (res.data?.name) {
			useTabs.setTitle(res.data.name + '-主页')
		}
      } else {
        ElMessage({
          message: res.message,
          type: 'error',
        })
      }
    })
  }
}
const updateStudentInfo = () => {
  sutdentInfoFormRef.value.validate({
    success: () => {
      const loading = proxy.$loading();
      proxy.$API.student.updateStudentDetail.post(studentInfo.value).then(res => {
        if (res.code === 200) {
            ElMessage({
              message: '更新成功',
              type: 'success',
            })
        } else {
          ElMessage({
            message: res.message,
            type: 'error',
          });
        }
      }).finally(() => loading.close())
    },
    error: () => {
      ElMessage({
        message: '必填项不能为空',
        type: 'error',
      })
    }
  })

}

const fixTop = ref(false)
const scroll = (e, handleFixTop) => {
  fixTop.value = e.scrollTop > 5
}


onMounted(() => {
  // 获取学员详情
  getStudentDetail()
})
</script>

<style lang="scss" scoped>
.main {
	background-color: #fff;
  padding: 0;
  border: 15px solid #fff;
}
.footer {
	display: flex;
	justify-content: center;
	width: 100%;
}
.el-affix {
  width: 100%;
  height: 50px;
  background-color: #fff;
  &.fixTop {
    ::v-deep(.el-affix--fixed) {
      box-shadow: 0px 5px 3px #eee;
      background-color: #fff;
    }
  }
  ::v-deep(.el-button) {
    margin-top: 10px;
    margin-left: 30px;
  }
}
</style>
